<template>
	<div class="list">
		<van-nav-bar title="类别列表" />

		<div class="container">
			<!-- 左侧导航栏 -->
			<side-bar :sideBar="sideBar" :sideBarCurrent.sync="sideBarCurrent"></side-bar>

			<!-- 顶部导航栏 -->
			<title-bar :titleBar="titleBar" :titleBarCurrent.sync="titleBarCurrent" :list="list"></title-bar>
		</div>

		<tab-bar></tab-bar>
	</div>
</template>

<script>
	import sideBar from "./components/sideBar.vue"
	import titleBar from "./components/titleBar.vue"
	
	import * as api from "api/list.js"
	export default {
		props:{
			id:{
				type:String,
				default:"1"
			}
		},
		components:{
			sideBar,
			titleBar
		},
		data() {
			return {
				sideBar: [], //左侧导航栏
				titleBar: [], //顶部导航栏
				list: [], //列表
				sideBarCurrent: 0, //左侧索引值
				titleBarCurrent: 0 //顶部索引值
			}
		},
		watch:{
			sideBarCurrent:{
				async handler(idx){//左侧索引值
					this.toggleIndex(idx,this.titleBarCurrent)
				},
				immediate:true
			},
			titleBarCurrent:{//顶部索引值
				async handler(idx){
					this.toggleIndex(this.sideBarCurrent,idx)
				},
				// immediate:true
			}
		},
		methods: {
			async API_getCategoryList() { //读取大类数据的接口
				return await api.getCategoryList()
			},
			async API_getCategorySubList(categoryId) { //读取小类的数据
				let result = {
					categoryId
				}
				return await api.getCategorySubList(result)
			},
			async API_getGoodsListByCategorySubID(categorySubId) { //根据类别获取商品列表
				let result = {
					categorySubId
				}
				return await api.getGoodsListByCategorySubID(result)
			},
			filterList(array, index) { //过滤列表
				return array.filter((item, idx) => {
					return idx < index
				})
			},
			async toggleIndex(sideBarCurrent,titleBarCurrent){//切换索引值
				let sideBar = await this.API_getCategoryList()
				this.sideBar = this.filterList(sideBar.data.data, 5)
				
				let titleBar = await this.API_getCategorySubList(this.sideBar[sideBarCurrent].id)
				this.titleBar = titleBar.data.data
				
				let list = await this.API_getGoodsListByCategorySubID(this.titleBar[titleBarCurrent].id)
				this.list = list.data.data
			}
		},
		// created(){
		// 	this.sideBarCurrent = Number(this.id)-1
		// },
		activated(){
			this.sideBarCurrent = Number(this.id)-1
			console.log(this.sideBarCurrent)
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		padding-bottom: 50px;
		.container {
			//容器
			display: flex;
		}
	}
</style>

